<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>frameset Example</title>
  </head>
  <body>
    <div>我是顶层</div>
    <div>
      <button type="button" onclick="b1Method()">调用第二层 b1方法</button>
      <button type="button" onclick="t1Method()">调用平行层 t1方法</button>
      <button type="button" onclick="cc1Method()">调用孩子1窗口 cc1方法</button>
      <button type="button" onclick="ccc1Method()">调用孩子2窗口 ccc1方法</button>
      <button type="button" onclick="openbaidu()">平行层打开百度</button>
    </div>
    <div>我有方法 a1</div>
    <iframe src="parallelFrame.html" name="parallelFrame" style="width: 100%;height: 30%;"></iframe>
    <iframe src="childFrame.html" name="childFrame" style="width: 100%;height: 90%;margin-top: 20px;"></iframe>
  </body>
  <script>
    var frameName="顶层";
    var baiduUrl = "https://www.baidu.com";
    function a1(src){
        alert(`${src} 调用了 顶层a1方法`);
    }

    /**
      调用第二层窗口 b1方法
    */
    function b1Method(){
      window.frames["childFrame"].b1(frameName);
    }

     /**
      调用平行层 t1方法
    */
    function t1Method(){
      window.frames["parallelFrame"].t1(frameName);
      }

    /**
      调用孩子1窗口 cc1方法
    */
    function cc1Method(){
      window.frames["childFrame"].frames["grandsonFrame"].frames["leftFrame"].cc1(frameName);
    }

    /**
      调用孩子2窗口 ccc1方法
    */
    function ccc1Method(){
      window.frames["childFrame"].frames["grandsonFrame"].frames["rightFrame"].ccc1(frameName);
    }

    /**
    平行层打开百度
    */
    function openbaidu(){
      window.open(baiduUrl,"parallelFrame");
    }
      
  </script>
</html>